<template>
  <div class="HomeView">
    <div class="box">
      <div class="left">
        <el-menu :default-active="num" class="el-menu-vertical-demo" background-color="#304156" text-color="#fff"
          active-text-color="#409eff">
          <div v-for="item in list" :key="item.id">
            <el-menu-item :index="item.path" v-if="!item.children">
              <i :class="item.icon"></i>
              <router-link :to="item.path" tag="span" slot="title">{{ item.name }}</router-link>
            </el-menu-item>
            <el-submenu :index="item.id" v-else>
              <template slot="title">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.name }}</span>
              </template>
              <el-menu-item v-for="r in item.children" :key="r.id" :index="r.path">
                <i :class="r.icon"></i>
                <router-link :to="r.path" tag="span" slot="title">{{ r.name }}</router-link>
              </el-menu-item>
            </el-submenu>
          </div>
        </el-menu>
      </div>
      <div class="right">
        <div class="top">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="r in nav" :key="r">{{ r }}</el-breadcrumb-item>
          </el-breadcrumb>
          <div>
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                {{ username }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <router-link :to="{ path: '/HomeView' }" tag="span"><el-dropdown-item>首页</el-dropdown-item></router-link>
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item @click.native="edit()" style="color:red;">切换账号</el-dropdown-item>
                <el-dropdown-item @click.native="edit()">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <div class="bottom">
          <div v-if="flag">
            <div class="btop">
              <div class="topt">经营概况</div>
              <div class="topb">
                <div class="count">
                  <h2>商品数量</h2>
                  <div class="number">
                    <p class="p1"> 在售<span>4</span></p>
                    <p class="p2"> 下架<span>2</span></p>
                  </div>
                </div>
              </div>
            </div>
            <div id="main" ref="chart">
            </div>
          </div>
          <router-view v-else></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { info, getStatistics } from "@/api/login"
export default {
  nav: [],
  data() {
    return {
      num: '186',
      flag: true,
      name: '',
      charts: '',
      nav: [],
      arr: [],
      main: '',
      username: '',
      list1: [],
      list2: [],
      list: [
        {
          id: "186",
          name: "首页",
          path: "/HomeView",
          icon: "el-icon-s-home"
        },
        {
          id: "33",
          name: "管理员/权限",
          icon: "el-icon-lollipop",
          children: [
            {
              id: "4",
              name: "角色管理",
              path: "/RoleManage",
              icon: "el-icon-coffee-cup"
            },
            {
              id: "5",
              name: "管理员列表",
              path: "/ManageList",
              icon: "el-icon-s-custom"
            },
          ],
        },
        {
          id: "14",
          name: "Banner管理",
          path: "/BannerManage",
          icon: "el-icon-picture-outline",
        },
        {
          id: "34",
          name: "CMS模块",
          icon: "el-icon-circle-plus-outline",
          children: [
            {
              id: "20",
              name: "单页管理",
              path: "/SinglepageManage",
              icon: "el-icon-edit"
            },
            {
              id: "21",
              name: "公告管理",
              path: "/AnnouncementManage",
              icon: "el-icon-service"
            },
          ]
        },
        {
          id: "121",
          name: "商城管理",
          icon: "el-icon-shopping-cart-full",
          children: [
            {
              id: "1122",
              name: "商品分类",
              path: "/CommodityManage",
              icon: "el-icon-menu"
            },
            {
              id: "78",
              name: "规格尺寸",
              path: "/SpecificationManage",
              icon: "el-icon-document-delete"
            },
            {
              id: "43",
              name: "商品管理",
              path: "/MerchandiseManage",
              icon: "el-icon-s-goods"
            }
          ]
        },
      ]
    }
  },
  methods: {
    getNum(arr) {
      arr.forEach(r => {
        if (r.path == this.$route.path) this.num = r.id
        else if (r.children) {
          this.getNum(r.children)
        }
      })
    },
    edit() {
      sessionStorage.removeItem("token");
      this.$router.push("/LoginView");
    },
    async inform() {
      let { data: res } = await info();
      this.username = res.adminCenterUser.realname
    },
    async imgage() {
      const { data: res } = await getStatistics()
      this.arr = res.users
      this.list1 = this.arr.map(r => r.day)
      this.list2 = this.arr.map(r => r.number)
      this.init();
    },
    //折线图方法
    init() {
      this.myChart = echarts.init(this.$refs.chart);
      var option = {
        title: {
          text: "用户增长数据",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["增长量"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.list1
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "增长量",
            type: "line",
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "top",
              },
            },
            data: this.list2
          },
        ],
      }
      this.myChart.setOption(option);
    },
  },
  mounted() {
    this.getNum(this.list)
    // this.num = this.$route.path
    this.inform()
    // this.imgage()
  },
  watch: {
    "$route": {
      handler(n) {
        // console.log(n);
        this.nav = n.meta.nav
        if (n.path == "/HomeView") this.flag = true
        else this.flag = false
        if (n.path == "/HomeView") {
          this.flag = true
          this.imgage()
        } else {
          this.flag = false
        }
      },
      immediate: true,
      deep: true
    }
  },
}
</script>

<style lang="scss" scoped>
.HomeView {
  .box {
    display: flex;

    .left {
      width: 200px;
      height: 100vh;
      background: #304156;
    }

    .right {
      width: calc(100vw - 200px);

      .top {
        height: 50px;
        background: #ddd;
        display: flex;
        // flex-direction: row;
        // flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        padding: 0px 35px 0px 30px;
      }

      .bottom {
        height: calc(100vh - 50px);

        .btop {
          width: 90%;
          height: 210px;
          margin: 30px auto;
          background-color: #fff;
          box-shadow: 0px 4px 10px #ccc;

          .topt {
            width: 100%;
            height: 50px;
            border-bottom: 1px solid #ccc;
            font-size: 17px;
            font-weight: 500;
            line-height: 55px;
            text-indent: 30px;
          }

          .topb {
            width: 100%;
            height: 151px;

            .count {
              height: 102px;
              width: 347px;
              margin-left: 32px;
              margin-top: 22px;
              box-shadow: 0px 0px 10px #ccc;
              border-radius: 5px;

              h2 {
                height: 45px;
                font-size: 16px;
                font-weight: 400;
                width: 100%;
                text-align: center;
                line-height: 45px;
              }

              .number {
                height: 57px;
                display: flex;

                .p1 {
                  text-align: right;
                  padding-right: 5px;
                  height: 40px;
                  width: 50%;
                  line-height: 40px;
                  border-right: 1px solid #ccc;
                  margin-top: 10px;
                  padding-right: 20px;

                  span {
                    font-size: 18px;
                    font-weight: 600;
                    margin-left: 5px;
                  }
                }

                .p2 {
                  height: 40px;
                  width: 50%;
                  line-height: 40px;
                  margin-top: 10px;
                  padding-left: 20px;

                  span {
                    font-size: 18px;
                    font-weight: 600;
                    margin-left: 5px;
                  }
                }
              }
            }

            .count:hover {
              color: #fff;
              background-color: #F4516C;
            }
          }
        }

        #main {
          height: 400px;
          width: 80%;
          margin-left: 55px;
          margin-top: 30px;
        }
      }
    }
  }
}

.el-dropdown-link {
  cursor: pointer;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>